<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="我是有底线的哦"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.store_id" class="dye-card">
        <div class="dye-card-header">
          <span>{{ item.store_id }}</span>
          <span
            style="font-weight: bold"
            :style="{
              color: descObj.previousPdIds.find((pdid) => item.pd_id == pdid)
                ? 'red'
                : 'green',
            }"
            >{{ store.text("storeStatus", item.pd_id) }}</span
          >
        </div>
        <div class="dye-card-body">
          <div
            class="dye-card-body-item"
            :style="{
              color: descObj.previousPdIds.find((pdid) => item.pd_id == pdid)
                ? 'red'
                : 'green',
            }"
          >
            <label>包装量：</label>
            <span>{{ item.store_num }}米</span>
          </div>
          
          <div class="dye-card-body-item">
            <label>类型：</label>
            <span>{{ store.text("prodTypes", item.plan_type) }}</span>
          </div>

          <div class="dye-card-body-item">
            <label>等级：</label>
            <span>{{ store.text("prodLevels", item.product_level) }}</span>
          </div>

          <div class="dye-card-body-item">
            <label>客户：</label>
            <span>{{ item.cus_name }}</span>
          </div>
          <div class="dye-card-body-item">
            <label>规格：</label>
            <span>{{ item.std_name }}</span>
          </div>
          <div class="dye-card-body-item">
            <label>花色：</label>
            <span>{{ item.color_name }}</span>
          </div>
        </div>

        <div
          v-if="descObj.previousPdIds.find((pdid) => item.pd_id == pdid)"
          class="dye-card-footer"
        >
          <van-button type="danger" size="small" @click="execConfirm(item)"
            >确认{{ descObj.markName }}</van-button
          >
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup >
import { ref, reactive, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, del, put, store } from "@/common";
import { Toast, Dialog } from "vant";
const route = useRoute();

const list = ref([]); //列表数据

const refreshing = ref(false);

const onRefresh = async () => {
  list.value = [];
  await getPage(1);
  Toast("刷新成功");
  refreshing.value = false;
};

const loading = ref(false);
const finished = computed(() => page.value.current >= page.value.last);
const onLoad = async () => {
  if (page.value.current >= page.value.last) return;
  await getPage(page.value.next);
  loading.value = false;

  if (page.value.current >= page.value.last) {
    console.log(list);
    finished.value = true;
  }
};



const props = defineProps({
  descObj: {
    type: Object,
    default() {
      return {
        urlMark: "store",
        markName: "入库",

        previousPdIds: [3010],
        currentPdId: 3020,
      };
    },
  },
});

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  group_id: "",
  date_start: "",
  date_end: "",
  group_cus: "",
  plan_id: "",
  plan_type: "", // 产品类型
  group_std: "",
  group_color: "",
  group_num_start: 0, //计划查询范围起始数量值
  group_num_end: 0, //计划查询范围结束数量值
  per: "",
  pd_id: ""
});

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  return new Promise((resolve, reject) => {
    query.pageNum = pageNo || 1;
    //previousPdIds
    query.previousPdIds = props.descObj.previousPdIds.join(",");
    get(`/process/${props.descObj.urlMark}`, query)
      .then((result) => {
        page.value = result.data;
        query.pageNum = page.value.current;
        query.pageSize = page.value.pageSize;
        list.value.push.apply(list.value, page.value.list);
        resolve(result);
      })
      .catch((err) => {
        reject(err);
      });
  });
};

query.pd_id = props.descObj.previousPdIds[0] || '';
//getPage(1);

//确定下线产量
const execConfirm = (row) => {
  Dialog.confirm({
    title: "提示",
    message: "您确认该包装" + props.descObj.markName + "已完成吗？",
  })
    .then(() => {
      put(`/process/${props.descObj.urlMark}/done/${row.store_id}`).then(
        (result) => {
          onRefresh();
          tip.success(props.descObj.markName + "成功！");
        }
      );
    })
    .catch(() => {
      // on cancel
    });
};



const refresh = ({ pd_id, pageNo }) => {
 

  query.pd_id = pd_id || "";

  onRefresh();

  // if (pageNo) {
  //   getPage(pageNo);
  // } else {
  //   getPage(page.value.current);
  // }
};
defineExpose({ refresh });
</script>

<style scoped>
.dye-card {
  border-bottom: 0.01rem solid #eeeeee;
  /* box-shadow: 0px 0.01rem 0.01rem 0px #F5F5F5; */
}

.dye-card > .dye-card-header {
  padding: 0.08rem 0.15rem 0.06rem;
  font-size: 0.16rem;
  color: #666666;
  box-shadow: 0rem 0.01rem 0.03rem 0rem #f5f5f5;

  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-body {
  padding: 0.1rem 0.2rem;
}
.dye-card > .dye-card-body > .dye-card-body-item {
  padding: 0.03rem 0rem;
  font-size: 0.14rem;
  display: flex;
  justify-content: space-between;
}
.dye-card > .dye-card-footer {
  padding: 0.1rem 0.15rem;
  display: flex;
  justify-content: flex-end;
}
.content {
  padding: 16px 16px 160px;
}
</style>